//this is very overkill for the modern world so dont worry too much about this width
@media only screen and (max-width: 425px) {
  #mediaQueryDebug {
    background: #8d6e63;
    &::before {
      content: "brown";
    }
  }
  header {
    nav {
      font-size: 0.8rem;
      line-height: 0.8rem;
      gap: 0.1rem;
    }
  }
  .page404 {
    .content {
      grid-template-columns: 1fr;
      grid-auto-flow: unset;
      gap: 1rem;
    }
  }
  .pageTest {
    #result .wrapper {
      grid-template-columns: 1fr;
      grid-template-areas:
        "stats" "chart"
        "morestats";
      .stats.morestats {
        justify-items: start;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: unset;
        grid-auto-flow: unset;
      }
    }
  }
  .pageAccount {
    .group.history table thead td:nth-child(3),
    .group.history table tbody td:nth-child(3),
    .group.history table thead td:nth-child(5),
    .group.history table tbody td:nth-child(5) {
      display: none;
    }
  }
  #keymap .row {
    height: 1rem;
    gap: 0.1rem;
  }
  #keymap .keymapKey,
  #keymap.split_matrix .keymapSplitSpacer {
    width: 1rem;
    height: 1rem;
    border-radius: 0.3rem;
    font-size: 0.5rem;
  }
  .testActivity {
    display: none;
  }

  .pageLeaderboards {
    .content .tableAndUser {
      //font-size: 0.7rem;
      .bigUser {
        gap: 1em;
        padding-left: 0.75em;
        .stat.narrow:last-child {
          font-size: 0.75em;
        }
        .userInfo {
          font-size: 0.8em;
        }
        .rank {
          margin-right: 0.5em;
        }
      }
      .titleAndButtons {
        // grid-template-columns: 1fr;
        .title {
          // text-align: center;
          font-size: 1em;
        }
      }
      table {
        .avatarNameBadge .flagsAndBadge .badge .text {
          display: block;
        }
        tbody td.date {
          font-size: 0.75em;
        }
        .avatarNameBadge {
          grid-template-columns: 1.25em 1fr;
          grid-template-areas:
            "avatar name"
            "badges badges";
          .flagsAndBadge {
            grid-area: badges;
            // justify-self: center;
          }
        }
      }
    }
  }
  .pageFriends {
    .content .friends table {
      td:nth-child(3) {
        display: none;
      }
    }
  }

  .pageAccountSettings [data-tab="blockedUsers"] {
    table {
      font-size: 0.75rem;
      td:nth-child(2) {
        display: none;
      }
    }
  }
}
